<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
            font-size: 14px;
        }

        #l-map {
            height: 600px;
            width: 100%;
        }

        #r-result {
            width: 100%;
        }
    </style>
    <script th:src="@{js/jquery.min.js}"></script>
    <script th:src="@{js/map.js}"></script>
    <!--<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=MLy2Xs1D6csnuwORcntVO6y8swoPnQ8R"></script>-->
    <title>约车</title>
</head>
<body>
<div id="l-map"></div>
<div id="start">起点:<input type="text" id="spoint" size="20" value="光电园" style="width:150px;"/></div>
<div id="r-result">终点:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;"/></div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
<div id="driving_way">
    <select>
        <option value="0">最少时间</option>
        <option value="1">最短距离</option>
        <option value="2">避开高速</option>
    </select>
</div>
<input type="button" id="search" value="查询"/>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }

    var map = new BMap.Map("l-map");
    map.centerAndZoom("重庆", 12);                // 初始化地图,设置城市和地图级别。
    map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {
            "input": "suggestId"
            , "location": map
        });

    var myValue;
    ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
        $('#suggestId').val(myValue);
    });


    //定位起点
    // var geolocation = new BMap.Geolocation();
    // // 开启SDK辅助定位
    // geolocation.enableSDKLocation();
    // geolocation.getCurrentPosition(function (r) {
    //     var myGeo = new BMap.Geocoder();
    //     myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function (result) {
    //         if (result) {
    //             $('#spoint').val(result.address + result.surroundingPois[0].title);
    //         } else {
    //             alert("定位失败，请手动输入地址")
    //         }
    //     });
    // });
    $("#search").click(function () {
        map.clearOverlays();
        var start = $('#spoint').val();
        var end = $('#suggestId').val().replace("-",'');
        //三种驾车策略：最少时间，最短距离，避开高速
        var routePolicy = [BMAP_DRIVING_POLICY_LEAST_TIME,BMAP_DRIVING_POLICY_LEAST_DISTANCE,BMAP_DRIVING_POLICY_AVOID_HIGHWAYS];
        var i=$("#driving_way select").val();
        search(start, end,routePolicy[i]);

        function search(start, end,route) {
            var driving = new BMap.DrivingRoute(map, {renderOptions: {map: map, autoViewport: true},policy: route});
            driving.search(start, end);
        }
    });
</script>